<!--欢迎页-->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <router-link to='/test'>test</router-link>
      </li>
      <li>
        <router-link to='/aaa'>test404</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'hello',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        p1 : new Promise(function (resolve) {
          setTimeout(function () {
            resolve("Hello");
          }, 3000);
        }),
        p2 : new Promise(function (resolve) {
          setTimeout(function () {
            resolve("World");
          }, 1000);
        })
      }
    },
    created(){
      this.helloWorld(false).then(function (message) {
        console.log(message);
      },function (error) {
        console.log(error);
      }).then(this.printWorld);

      this.testAll();
    },
    methods:{
       helloWorld(ready){
        return new Promise(function (resolve, reject) {
          if (ready) {
            resolve("Hello World!");
          } else {
            reject("Good bye!");
          }
        });
      },
      printWorld(){
         console.log("!!!")
      },

      testAll(){
        Promise.all([this.p1,this.p2]).then(function (result) {
          console.log(result);
        })
      }

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
